<sqx-history-step
    [elementInfo]="stepInfo"
    [elementType]="branchItem.step.step.stepType"
    [isActive]="isNext"
    [isExpandable]="(!!state && state.attempts.length > 0) || stepInfo.properties.length > 0"
    [isFirst]="isFirst"
    [isLast]="isLast">
    <ng-container summary>
        <div class="col">
            <span class="badge rounded-pill badge-{{ state?.status | sqxRuleClass }}">{{ state?.status || "Pending" }}</span>
        </div>

        <div class="col col-attempts text-sm">{{ branchItem.step.name || stepInfo.title }}</div>

        <div class="col text-sm">
            <strong class="me-1">{{ state?.attempts?.length || 0 }}</strong> {{ "rules.ruleEvents.attempts" | sqxTranslate }}
        </div>
    </ng-container>

    <ng-container details>
        @if (state) {
            <ul class="nav nav-tabs2 mt-2">
                @if (stepInfo.properties.length > 0) {
                    <li class="nav-item">
                        <a class="nav-link" [class.active]="attemptIndex === -1" (click)="selectAttempt(-1)">
                            {{ "common.properties" | sqxTranslate }}
                        </a>
                    </li>
                }

                @for (attempt of state.attempts; let i = $index; track i) {
                    <li class="nav-item">
                        <a class="nav-link" [class.active]="attemptIndex === i" (click)="selectAttempt(i)">
                            @if ($first) {
                                {{ "rules.ruleEvents.attempt" | sqxTranslate }}&nbsp;
                            }
                            #{{ i + 1 }}
                        </a>
                    </li>
                }
            </ul>

            @if (attemptIndex === -1) {
                <div class="details">
                    @for (property of stepInfo.properties; track property.name) {
                        <sqx-state-step-property [property]="property" [value]="$any(stepDefinition)[property.name]" />
                    }
                </div>
            } @else if (state.attempts[attemptIndex]) {
                <div class="details"><sqx-state-attempt [attempt]="state.attempts[attemptIndex]" /></div>
            }
        }
    </ng-container>
</sqx-history-step>
